<!DOCTYPE html>
<html>

<head>
    <title>{$theme_vars.plate_name|default=''} {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet">
    <widgetsHead />
    <hook name="before_head_end" />
    <php>
        $page=[
            'list_rows'=>6,
            'next'=>'下一页',
            'prev'=>'上一页'
        ];
    </php>
</head>
<body class="body-white">
    <include file="public@nav" />
    <div id="news">
        <div id="pageHeader">
            <img src="http://{$theme_vars.https}/upload/{$theme_vars.upImg}" alt="">
        </div>
        <div id="pageContent">
            <div id="newsTitle">
                <div id="title">
                    新闻中心
                </div>
                <div class="btn">
                    <a href="{$theme_vars.exurl}" style="color: #FFF;text-decoration: none;">
                    报名参展
                     </a>
                </div>
                <div class="btn" style="background:#2da0bd">
                    <a href="{$theme_vars.visiturl}" style="color: #FFF;text-decoration: none;">
                        报名参观
                    </a>
                </div>
            </div>
            <div>
                <portal:articles  order="id" categoryIds="1" page="$page" order="post.update_time DESC">
                    <a class="newsBoxa" title="{$vo.post_title}"
                        href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}">
                        <div class="newsBox">
                            <img  src="http://{$theme_vars.https}/upload/{$vo.thumbnail}" alt="">
                            <div class="info">  
                                <div class="title">{$vo.post_title}</div>
                                <div class="content">{$vo.post_excerpt}</div>
                                <div class="more">
                                    <img class="logo" src="__TMPL__/public/assets/images/time.png" alt="">
                                    <span class="time">{{changeTime('{$vo.update_time}')}}</span>
                                </div>   
                            </div>    
                        </div>
                    </a>
                </portal:articles>
                <div id="page">
                    <ul class="pagination">
                        <page/>
                    </ul>       
                </div>
                
            </div>
            
        </div>
    </div>
   
     
    <include file="public@footer" />
    <include file="public@scripts" />
    <widgetsScript />
    <hook name="before_body_end" />
</body>

</html>
<script src="__TMPL__/public/assets/js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#news',
        data() {
            return{

            }
        },
        methods:{
            changeTime(time){
                const timestamp = Number(time)
                const dateObj = new Date(timestamp*1000); 
                const year = String(dateObj.getFullYear()); // 获取年份
                const month = String(dateObj.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
                const day = String(dateObj.getDate()).padStart(2, "0"); // 获取日期，并补零
                return year + "-" + month + "-" + day; // 返回转换后的日期格式
            },
        }
    })
</script>
<style>
    #news{
        display: flex;
        flex-direction: column;
       
    }
    #pageHeader {
        background-color: #ccc;
       display: flex;
       justify-content: center;
    }

    #pageHeader img {
        width: 100vw;
        height: 17.188vw;
        
    }

    #pageContent {
        display: flex;
        width: 62.5vw;
        margin: 2.604vw auto;
    }
    #pageContent #newsTitle{
        display: flex;
        flex-direction: column;
    }
    #pageContent #newsTitle #title{
        height: 2.604vw;
        width: 14.583vw;
        padding-left: 2.604vw;
        font-size: 1.146vw;
        color: #333;
        background-color: #f2f2f2;
        margin-bottom: 1.042vw;
        line-height: 2.604vw;
        font-weight: 600;
    }
    #pageContent #newsTitle .btn{
        width: 13.021vw;
        margin-bottom: 1.042vw;
        color: #FFF;
    }
    #pageContent .newsBox {
       display: flex;
       margin:0 0 1.563vw 1.563vw;
       
    }
    #pageContent .newsBox img{
        width: 9.375vw;
        height: 5.208vw;
        border-radius: 0.521vw;
    }
    #pageContent .newsBoxa{   
        text-decoration: none; /* 取消默认的下划线 */
        color: #333;
    }
    #pageContent .newsBoxa:focus {
        outline:none;  
        -moz-outline:none;
    }
    #pageContent .newsBoxa:hover{   
        text-decoration: none; /* 取消默认的下划线 */
    }
    #pageContent .newsBox .info {
        margin-left: 1.042vw;
    }
    #pageContent .newsBox .info .title{
         font-size: 0.938vw;
         color: #333;
         margin: 0;
    }
    #pageContent .newsBox .content {
        margin: 0.521vw 0 1.042vw 0;
        color: #b2b2b2;
        font-size: 0.729vw;
       
    }
     #pageContent .newsBox .more {
        font-size: 0.729vw;
        color: #b2b2b2;
        display: flex;
        align-items: center;

    }
    #pageContent .newsBox .more .time{
        font-size: 0.729vw;
        color: #b2b2b2;
        margin-left: 0.521vw;
    }
    #pageContent .newsBox .more .logo{
        width: 0.729vw;
        height: 0.729vw;
    }
    
    .pagination>li>a, .pagination>li>span{
        color: #333;
    }
    .pagination>.active>span{
        color: #FF913c;
    }
    #page{
        display: flex;
        justify-content: center;
    }
</style>